<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>visibility</title>

        <style type="text/css">
            .shen-xian-jie-jie {
                visibility: hidden ;
                width: 300px ;
                height: 300px ;
                background: url(liuyifei.jpg) center/cover no-repeat ;
             }
             .text { background-color: #dedede ; }
        </style>

    </head>
    <body>

        <div>
            <button type="button">点我可以显示或隐藏神仙姐姐哦</button>
            <div class="shen-xian-jie-jie"></div>
            <div class="text">落霞与孤鹜齐飞，秋水共长天一色</div>
        </div>

        <script type="text/javascript">
        (function(){

            let hidden = true ; // 若 hidden 为 true 则表示 神仙姐姐 被隐藏了

            let btn = document.querySelector( '[type=button]' );

            let x = function(){
                let sx = document.querySelector( '.shen-xian-jie-jie' );
                if( hidden ) {
                    sx.style.visibility = 'visible' ;
                    hidden = false ;
                } else {
                    sx.style.visibility = 'hidden' ;
                    hidden = true ;
                }
            }

            btn.addEventListener( 'click' , x , false );

        })();
        </script>
        
    </body>
</html>